<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script src="../js/jquery-3.5.1/jquery-3.5.1.js"></script>
</head>
<body onload="f()">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<div id="app">
    <i-table border :columns="columns12" :data="data6">
        <template slot-scope="{ row }" slot="name">
            <strong>{{ row.id }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <i-button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</i-button>
            <i-button type="error" size="small" @click="remove(index)">Delete</i-button>
        </template>
    </i-table>
</div>
</body>
<script>
    var petList = [];
    var Main = {
        data() {
            return {
                columns12: [
                    {
                        title: '编号',
                        key: 'pet_id'
                    },
                    {
                        title: '宠物昵称',
                        key: 'pet_name'
                    },
                    {
                        title: '宠物年龄',
                        key: 'age'
                    },
                    {
                        title: '性别',
                        key: 'gender'
                    },
                    {
                        title: '品种',
                        key: 'pet_type'
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data6: petList,
            }
        },
        methods: {
            show(index) {
                this.$Modal.info({
                    title: 'Pet Info',
                    content: `id：${this.data6[index].pet_id}<br>
                              Name：${this.data6[index].pet_name}<br>
                              gender：${this.data6[index].gender}<br>
                              type：${this.data6[index].pet_type}<br>
                              age：${this.data6[index].age}`
                })
            },
            remove(index) {
                this.data6.splice(index, 1);
            }
        }
    };

    function f() {
        $.ajax({
            url: '/shop/findPetsByType',
            type: 'get',
            data: {
                'type': 'xxx'
            },
            success(res) {
                petList = res.data;
                console.log(petList);
                Main.data().data6 = petList;
                console.log(Main.data().data6);
                var Ctor = Vue.extend(Main);
                new Ctor().$mount('#app');
            }
        })
    }
</script>
</html>